var htmlStr = [
'<main style="display:none">',
 ' <input id="tab1" type="radio" name="tabs" checked>',
  '<label for="tab1">可视域分析</label>',

  '<input id="tab2" type="radio" name="tabs">',
  '<label for="tab2">阴影分析</label>',

  '<input id="tab3" type="radio" name="tabs">',
  '<label for="tab3">通视分析</label>',

  '<input id="tab4" type="radio" name="tabs">',
'  <label for="tab4">天际线分析</label>',

 ' <section id="content1">',
          '<div>',
              '<label>方向</label>',
             '<input type="range" id="direction"  min="0" max="360" step="1.0" title="方向" data-bind="value: direction, valueUpdate: "input"">',
                '<input type="text" size="5" data-bind="value: direction">',
         ' </div>',

          '<div>',
                '<label >翻转</label>',
                '<input type="range" id="pitch" min="-90" max="90" step="1.0" value="1" title="翻转" data-bind="value: pitch, valueUpdate: "input"">',
                '<input type="text" size="5" data-bind="value: pitch" >',
            '</div>',

            '<div>',
                '<label >距离</label>',
                '<input type="range" id="distance" min="1" max="500" step="1.0" value="1" title="距离" data-bind="value: distance, valueUpdate: "input"">',
                '<input type="text" size="5" data-bind="value: distance" >',
           ' </div>',

            '<div>',
                '<label >水平视场角</label>',
                '<input type="range" id="horizonalFov" min="1" max="120" step="1" value="1" title="水平视场角" data-bind="value: horizontalFov, valueUpdate: "input"">',
                '<input type="text" size="5" data-bind="value: horizontalFov" >',
           ' </div>',
 
            '<div>',
                '<label >垂直视场角</label>',
               ' <input type="range" id="verticalFov" min="1" max="90" step="1.0" value="1" title="垂直视场角" data-bind="value: verticalFov, valueUpdate: "input"">',
                '<input type="text" size="5" data-bind="value: verticalFov">',
            '</div>',
            '<div class="square">',
                '<label  style="width:100%; padding-left: 0;">可见区域颜色</label><input class="colorPicker" data-bind="value: visibleAreaColor,valueUpdate: "input""  id="colorPicker1"/>',
            '</div>',
            '<div class="square">',
                '<label style="width:100%; padding-left: 0;">不可见区域颜色</label><input class="colorPicker" data-bind="value: invisibleAreaColor,valueUpdate: "input""  id="colorPicker2"/>',
            '</div>',
            '<div style="position: relative; left: 41%;">',
            ' <button type="button"  class="btn btn-info" id="chooseView">添加可视域</button>',
             '<button type="button"  class="btn btn-info" id="clearVS">清除</button>',
            '</div>',
'  </section>',

'  <section id="content2">',
       '<div style=" margin-top: 10px; margin-bottom: 10px;">',
        '<label>日期选择</label>',
        '<input id="selDate" type="date" value="2017-05-13"/>',
    '</div>',
    '<div style=" margin-top: 10px; margin-bottom: 10px;">',
        '<label>开始时间</label>',
       ' <select id="startTime">',
            '<option value="0">0:00</option>',
            '<option value="2">2:00</option>',
           ' <option value="4">4:00</option>',
            '<option value="6">6:00</option>',
            '<option value="8">8:00</option>',
            '<option value="10" selected>10:00</option>',
            '<option value="12">12:00</option>',
            '<option value="14">14:00</option>',
            '<option value="16">16:00</option>',
            '<option value="18">18:00</option>',
           ' <option value="20">20:00</option>',
           ' <option value="22">22:00</option>',
       ' </select>',
        '</div>',
    '<div style="margin-top: 10px;margin-bottom: 10px">',
        '<label>结束时间</label>',
        '<select id="endTime" >',
            '<option value="2">2:00</option>',
           ' <option value="4">4:00</option>',
            '<option value="6">6:00</option>',
            '<option value="8">8:00</option>',
            '<option value="10">10:00</option>',
            '<option value="12" selected>12:00</option>',
            '<option value="14">14:00</option>',
            '<option value="16">16:00</option>',
            '<option value="18">18:00</option>',
            '<option value="20">20:00</option>',
            '<option value="22">22:00</option>',
            '<option value="24">24:00</option>',
        '</select>',
        '</div>',
   ' <div style=" margin-top: 10px; margin-bottom: 10px;">',
       ' <label>底部高程</label>',
        '<input id="bottomHeight" value="20"/>',
    '</div>',
    '<div style="margin-bottom: 10px;margin-top: 10px">',
        '<label>拉伸高度</label>',
        '<input id="extrudeHeight" value="20"/>',
   ' </div>',
    '<div style="position: relative; left: 15%;">',
        '<button type="button"  class="btn btn-info"  id="shadowAnalysis" >阴影分析</button>',
        '<button type="button"  class="btn btn-info" id="sunlight" >日照效果</button>',
        '<button type="button"  class="btn btn-info" id="clear" >清除</button>',
    '</div>',
 ' </section>',

  '<section id="content3">',
    '<div style=" margin-top: 10px; margin-bottom: 10px;">',
        '<label style="width:100%">观察点位置</label>',
        '<label>X:</label><input id="viewPointX" value="20"/>',
        '<label>Y:</label><input id="viewPointY" value="20"/>',
        '<label>Z:</label><input id="viewPointZ" value="20"/>',
    '</div>',
  '<div class="square">',
    '<label style="width:100%; padding-left: 0;">可视颜色</label><input class="colorPicker" data-bind="value: visibleColor,valueUpdate: "input""  id="visibleColor"/>',
  '</div>',
'  <div class="square">',
    '<label  style="width:100%; padding-left: 0;">不可视颜色</label><input class="colorPicker" data-bind="value: hiddenColor,valueUpdate: "input""  id="hiddenColor"/>',
'  </div>',
      
 ' <div style="position: relative; left: 9%;">',
      '<button type="button"  class="btn btn-info" id="addViewpoint" >添加观察点</button>',
      '<button type="button"  class="btn btn-info" id="addTarget" >添加目标点</button>',
      '<button type="button"  class="btn btn-info" id="clearSL" >清除</button>',
 ' </div>',
    
'  </section>',

  '<section id="content4">',
    '<div style=" margin-top: 10px; margin-bottom: 10px;">',
        '<label style="width:100%">观察点位置</label>',
        '<label>X:</label><input id="skyviewX" value="20"/>',
        '<label>Y:</label><input id="skyviewY" value="20"/>',
       ' <label>Z:</label><input id="skyviewZ" value="20"/>',
    '</div>',
      '<div class="square">',
        '<label style="width:100%; padding-left: 0;">显示模式</label>',
         '<select id="skylineMode" style="width:70%;">',
            '<option value="1" selected>线显示</option>',
            '<option value="2">面显示</option>',
        '</select>',
      '</div>',
      '<div class="square">',
        '<label  style="width:100%; padding-left: 0;">天际线颜色</label><input class="colorPicker" data-bind="value: skylineColor,valueUpdate: "input""  id="skylineColor"/>',
      "</div>",
       
    "<div>",
      '<button  class="btn btn-info"  id="chooseView2" >天际线</button>',
      '<button  class="btn btn-info" id="getSkyline2D" >二维显示</button>',
      '<button  class="btn btn-info" id="setLimitBody" >限高体</button>',
      '<button  class="btn btn-info" id="clearSkyline" >清除</button>',
 ' </div>',
  '</section>',

'</main>'
]